home *** CD-ROM | disk | FTP | other *** search
/ Nikkei Mac 20 / NIKKEI-MAC-CD-VOL-20-1998-12.ISO.7z / NIKKEI-MAC-CD-VOL-20-1998-12.ISO / オンラインソフト / 9.ウェブ作成ツール / PageSpinner / PageSpinner 2.01.sit / PageSpinner 2.0.1 / Examples / JavaScript / PopupMenu < prev    next >
Text File  |  1997-04-28  |  3KB  |  65 lines
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Popup Menu</TITLE>
  4. </HEAD>
  5.  
  6. <BODY BGCOLOR=FFFFFF TEXT=000000>
  7. <H1>JavaScript Popup Menu</H1>
  8.  
  9. <B>This page contains popup menu used for selecting a page or URL</B>
  10. <P>
  11. Please note that JavaScript is currently only available in Netscape Navigator 2.0 or higher. <BR>
  12. <FONT COLOR="931B15">Do not assume that all in your audience are using a JavaScript enabled browser.</FONT>
  13. <HR>
  14. Here is an example on how JavaScript can be used in a form with a popup menu that has links to other pages.
  15.  
  16. <FORM>
  17. <SELECT NAME="menu">
  18. <OPTION SELECTED VALUE="index.html">Contents 
  19. <OPTION VALUE="groucho.html">Groucho 
  20. <OPTION VALUE="harpo.html">Harpo 
  21. <OPTION VALUE="chico.html">Chico 
  22. <OPTION VALUE="zeppo.html">Zeppo 
  23. </SELECT>
  24.  
  25. <INPUT TYPE=BUTTON VALUE="Go" onClick="top.location.href = this.form.menu.options[this.form.menu.selectedIndex].value">
  26. </FORM> 
  27.  
  28. <HR>
  29. <P>
  30. <B>How to use</B>
  31. <BLOCKQUOTE>
  32. The source of the popup menu looks like this:
  33. <P>
  34. <XMP><FORM>
  35. <SELECT NAME="menu">
  36. <OPTION VALUE="index.html" SELECTED>Contents 
  37. <OPTION VALUE="groucho.html">Groucho 
  38. <OPTION VALUE="harpo.html">Harpo 
  39. <OPTION VALUE="chico.html">Chico 
  40. <OPTION VALUE="zeppo.html">Zeppo 
  41. </SELECT>
  42.  
  43. <INPUT TYPE=Button VALUE="Go" 
  44. onClick="top.location.href = 
  45. this.form.menu.options[this.form.menu.selectedIndex].value">
  46. </FORM> </XMP>
  47. <P>
  48. Change the links and text to be displayed in the menu by editing the lines containing the <CODE>OPTION</CODE> tags. Note that you can also use full URL's in the VALUE attribute.
  49. <P>
  50. Change the text of the button in the Value attribute of <BR>
  51. <CODE> <INPUT TYPE=BUTTON VALUE="Go"</CODE> ...
  52. </BLOCKQUOTE>
  53. <HR>
  54. <P>
  55. <B>Programming notes</B>
  56. <BLOCKQUOTE>
  57. The actual JavaScript is in the button's onClick handler. The JavaScript array <CODE>this.form.menu.options</CODE> is an array of the option tags (with its contents)  in the form named "menu". To find which menu item that is selected we can use the property <CODE>this.form.menu.selectedIndex</CODE>, that holds the index of the selected item.
  58. <P>
  59. We then get the name of the page by accessing the value attribute of the selected  item in the array with the expression <CODE>this.form.menu.options[this.form.menu.selectedIndex].value</CODE>.
  60. <P>
  61. <CODE>top.location.href</CODE> is the address of the url to be displayed in the window. Since we set <CODE>top.location</CODE> to contain the new pages URL, the new page will be displayed in the entire window, even if our page is inside a frame. To get a page to be displayed in a specific frame is an exercise left to the reader <FONT FACE="Monaco, Courier"><FONT SIZE="-2">;-)</FONT></FONT>.
  62. </BLOCKQUOTE>
  63. </BODY>
  64. </HTML>
  65.